<template>
	<view class="" style="height: 100vh;">
			
			<view class="content">
			
				<view :class="show?'hehe hehe_':'hehe'">
					<!-- 冠军队 卓越队 精英队 优秀队 -->
					<view>恭喜您所在的队伍获得 {{myTeam.rank==1?'冠军队':myTeam.rank==2?'卓越队':myTeam.rank==3?'精英队':'优秀队'}} 称号</view>
					<image
						src="https://wjlm.goldsu.cn/file/e1164f4e-c160-44ad-9002-46b5fb271ead.png" mode=""></image>
				</view>
			
			</view>
			
			<view :class="show?'content_ xwj':'content_'">
				<!-- <view class="statusBarHeight">
			
				</view>
				<view class="user_list" @click="nav">
					<image v-for="(item,index) in 6" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="palette">
					
				</view> -->
			
				<image
					src="https://wjlm.goldsu.cn/file/15a430df-c3a4-4ec5-8694-e90a366258bc.png"
					mode="aspectFill" class="bg" @load="imgLoad"   @click="add"></image>
				<image
					src="https://wjlm.goldsu.cn/file/ecb91380-ed35-4fbc-a92b-bb1b79b90bdc.png"
					mode="" :class="code?'roon1 roon1_':'roon1'"></image>
				<image
					src="https://wjlm.goldsu.cn/file/23b3a86d-03ec-406b-9d2a-7c1f9fc78472.png"
					mode="" :class="code?'roon2 roon2_':'roon2'"></image>
			</view>
			
<gameLoading/>
	</view>

</template>

<script>
	// import sign from '@/components/sign/sign.vue'
	export default {
		components: {

		},
		data() {
			return {
				code: false,
				show: false,
				teamList: [],
				userPeople: {},
				myTeam: {},
			}
		},
		
		mounted() {
				
			uni.$on('onMessage', (res) => {
				
					this.teamList = res.data.team
					this.userPeople = res.data.userPeople
					this.myTeam = this.teamList.filter(item => item.id == this.userPeople.teamId)[0]
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});

		},
		onLoad() {
				this.$store.commit('switchGame', {
					code: true
				})
		},
		methods: {
			imgLoad(e){
				this.$store.commit('switchGame', {
					code: false
				})
			},

			add() {
				if(this.code) return;
				uni.vibrateLong({
					success: function () {
						console.log('success');
					}
				});

				this.code = true
				setTimeout(() => {
					this.show = true
					setTimeout(() => {
						if (this.userPeople.cap_zt == 2) {
							uni.redirectTo({
								url: '/pages/gameTemplate/decoration'
							})
						} else {
							uni.redirectTo({
								url: '/pages/gameTemplate/awaitFinish'
							})
						}					

					}, 10000)
					// 50
				}, 3000)
			},
			nav() {

				uni.navigateTo({
					url: './drawingBoard'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 100vh;
		background: #000;

		view {

			color: #EFDCBF;
			font-size: calc(40vmin / 7.5);
			text-align: center;
			margin-top: calc(40vmin / 7.5);
		}
	}

	.hehe {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: calc(25vmin / 7.5);
		left: 0;
		z-index: -1;
		transition: all 5s ease-in-out;
		// transform-origin:calc(100vw - calc(380vmin / 7.5)) calc(100vh - calc(140vmin / 7.5)) ; 
		transform-origin: calc(100vw - calc(380vmin / 7.5)) calc(100vh - calc(160vmin / 7.5));
		transform: scale(.6, .5);

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.hehe_ {
		top: calc(-25vmin / 7.5);
		transform: scale(1, 1);
	}

	.bg {

		position: absolute;
		top: 0;
		right: 0;
		width: calc(1624vmin / 7.5);
		height: calc(750vmin / 7.5);
		z-index: 99;


	}

	.content_ {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		// background-color: #000;
		transition: all 11s ease-in-out;
		transform-origin: calc(100vw - calc(380vmin / 7.5)) calc(100vh - calc(140vmin / 7.5));
	}

	.roon1 {
		width: calc(348vmin / 7.5);
		height: calc(182vmin / 7.5);
		position: absolute;
		top: calc(502vmin / 7.5);
		right: calc(301vmin / 7.5);
		transition: all 4s ease-in-out;
	}

	.roon1_ {
		top: calc(682vmin / 7.5);
	}


	.roon2 {
		width: calc(326vmin / 7.5);
		height: calc(192vmin / 7.5);
		position: absolute;
		top: calc(348vmin / 7.5);
		right: calc(316vmin / 7.5);
		transition: all 4s ease-in-out;
	}

	.roon2_ {
		top: calc(182vmin / 7.5);
	}

	.xwj {

		transform: scale(10);
	}

	.user_list {
		display: flex;
		padding: 0 140upx;
		justify-content: space-around;

		image {
			width: 60upx;
			height: 60upx;
			margin-right: 20upx;
		}
	}

	.palette {
		width: 100vw;
		height: 600upx;
	}

</style>
